let slider_list = [
  {
    bg_olor:"#FD3555",
    title:"Nature flower",
    subtitle:"all in pink",
    bg_img:"https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80"
  },
  {
    bg_olor:"#2A86BA",
    title:"Bluuue Sky",
    subtitle:"with it's mountains",
    bg_img:"https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80",
  },
  {
    bg_olor:"#252E33",
    title:"Lonely castle",
    subtitle:"in the wilderness",
    bg_img:"https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80",
  },
  {
    bg_olor:"#FFB866",
    title:"Flying eagle",
    subtitle:"in the sunset",
    bg_img:"https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80",
  },
]
let app = document.querySelector('#app')
let left_box = document.querySelector('.left')
let right_box = document.querySelector('.right')

function createdLeftSlider(item) {
  let slider = document.createElement('div')
  slider.classList.add('slider')
  slider.style.backgroundColor = item.bg_olor
  let title = document.createElement('div')
  title.classList.add('title')
  title.innerText = item.title
  slider.appendChild(title)
  let subtitle = document.createElement('div')
  subtitle.classList.add('subtitle')
  subtitle.innerText = item.subtitle
  slider.appendChild(subtitle)

  return slider
}


function createdRightSlider(url){
  let slider = document.createElement('div')
  slider.classList.add('bg_img')
  slider.style.backgroundImage = `url(${url})`
  return slider
}
// 当前滑块
let cur_slider = 0
// 容器的高度
let box_height = app.offsetHeight;

// 自执行函数 -- 初始化元素
(()=>{
  let i = slider_list.length - 1
  slider_list.forEach(item=>{
    left_box.appendChild(createdLeftSlider(item))
    right_box.appendChild(createdRightSlider(slider_list[i].bg_img))
    i--
  })
  left_box.style.top = `-${(slider_list.length - 1) * box_height}px`
})()



let next_btn = document.querySelector('.down')

let prev_btn = document.querySelector('.up')


next_btn.addEventListener('click',()=> sliderChange('down'))

prev_btn.addEventListener('click',()=> sliderChange('up'))

function sliderChange(direction){
  if(direction == 'up'){
    cur_slider--
    if(cur_slider < 0){
      cur_slider = slider_list.length - 1
    }
  }else{
    cur_slider++
    if(cur_slider >= slider_list.length){
      cur_slider = 0
    }
  }
  left_box.style.transform = `translateY(${cur_slider * box_height}px)`
  right_box.style.transform = `translateY(-${cur_slider * box_height}px)`
}